<template>
  <a-collapse accordion @change="changeActivekey">
    <a-collapse-panel v-for="item in this.tableData" :key="item.objectId" :header="item.label">
      <ManageRuleForm :edit-data="item"></ManageRuleForm>
      <a-switch
          slot="extra"
          checked-children="开"
          un-checked-children="关"
          :checked="item.status?true:false"
          @click="handleClick(item.objectId,item.status)"
      />
    </a-collapse-panel>
  </a-collapse>
</template>

<script>

import {find} from 'lodash'
import {mapActions, mapMutations} from "vuex";
import ManageRuleForm from "@/pages/systemManage/activation/manageRule/MangeRuleForm";

export default {
  name: "CollapseBody",
  components: {ManageRuleForm},
  props: {
    tableData: Array
  },
  methods: {
    ...mapMutations('rule', ['setState']),
    ...mapActions('rule', ['disable']),
    changeActivekey(key) {
      this.setState({name: 'editData', value: find(this.tableData, {objectId: key})})
      this.setState({name: 'currentEditKey', value: key})
    },
    handleClick(objectId, status) {
      this.disable({objectId, status})
    }
  }
}
</script>

<style scoped>

</style>
